import ThemeContext from '../context'
import { useContext } from 'react';

const TodoList = () => {
  const { todos, todoListIs, todoListRemove } =useContext(ThemeContext)
  return (
    <ul className="todo-list">
      {todos.map(todo => (
        <li key={todo.id} className={todo.done ? 'completed' : ''}>
          <div className="view">
            <input
              className="toggle"
              type="checkbox"
              readOnly
              checked={todo.done}
              onChange={()=>todoListIs(todo.id)}
            />
            <label>{todo.text}</label>
            <button className="destroy" onClick={()=>todoListRemove(todo.id)} />
          </div>
          <input  className="edit" defaultValue="Create a TodoMVC template" />
        </li>
      ))}
    </ul>
  )
}

export default TodoList
